<template>
  <!-- 运营报表组件 -->
  <div>
    <gongyong @serchClick="serchClick" ref="gongyong" :gongyongOption="gongyongOption">
      <template #top-left>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker style="width: 15%" v-model="dateVal" :type="dateType" size="mini" placeholder="选择日期" @change="dateChange" :value-format="valFrom">
          </el-date-picker>

          <span class="date-text" style="margin-left: 15px">日期筛选</span>
          <el-select v-model="dateBin" @change="selectChange" size="mini" style="width: 10%" :disabled="seltdisab">
            <el-option v-for="item in dateOptions" :key="item.id" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>

          <!-- 报表下拉 -->
          <statementSelect style="width: 15%" :tableColumn="tableColumn" @staChange="staChange" :dateBin="dateBin"></statementSelect>
        </div>
      </template>

      <!-- 下边的Table组件 -->
      <template #bottom>
        <MyTable :dataList="tableColumn" :devTable="consume" :tableStyle="tableStyle" v-loading="loading">
        </MyTable>
      </template>
    </gongyong>
  </div>
</template>

<script>
import gongyong from "../layout/gongyong.vue"; // 共用模板
import MyTable from "./components/MyTable.vue";
import statementSelect from "./components/statementSelect.vue";
import { getConsume, getConsumeDay, getConsumeMonth, getConsumeYear, getPressureDayReport, getPressureMonthReport, getPressureYearReport } from "@/api/operationAnalysis/waterAnalysis/waterOperation";

// :devTable="" table表格需要的列表数据
export default {
  components: {
    gongyong,
    MyTable,
    statementSelect,
  },

  data () {
    return {
      tableColumn: [
        {
          name: "时间",
          prop: "displayTime",
          type: "",
          id: 1,
        },
        {
          name: "出水压力(Mpa)",
          prop: "das",
          type: "",
          id: 2,
          hm: "(Mpa)",
        },
      ], //表头配置

      tabdata: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],

      gongyongOption: {
        top: true,
        center: false,
        bottom: true,
        reset: false,
      },
      tableStyle: {
        TableHight: "650",
      }, // table 表格组件高度
      // 共用组件配置
      dateVal: "2022-03-14", // 时间绑定
      dateBin: 0, // 时间下拉绑定
      suoS: {
        properties:
          "outPressure", // 传入需要显示的列
        searchTime: "2022-03-14", //  查询时间
        timeType: 0, // 日期类型
        monitorPointId: "", // 监测点ID
      }, // 查询条件
      interType: 'noQs',
      dateOptions: [
        {
          value: 0,
          label: "日",
        },
        {
          value: 1,
          label: "月",
        },
        {
          value: 2,
          label: "年",
        },
      ], // 日期下拉绑定

      // dataList: [
      //   {
      //     prop: "displayTime",
      //     label: "时间",
      //     id: 0,
      //   },
      //   {
      //     prop: "outflowTotal",
      //     label: "供水量(㎡)",
      //     id: 1,
      //   },
      //   {
      //     prop: "electricQuantity",
      //     label: "电耗(KWh)",
      //     id: 2,
      //   },
      //   {
      //     prop: "electricQuantity",
      //     label: "药耗(Kg)",
      //     id: 3,
      //   },
      //   {
      //     prop: "powerPerTon",
      //     label: "吨水电耗(KWh/吨)",
      //     id: 4,
      //   },
      //   {
      //     prop: "dose",
      //     label: "吨水药耗(Kg/吨)",
      //     id: 5,
      //   },
      // ],
      // dataList: [], // 存放请求配置表头
      consume: [], // 存放消耗列表数据
      loading: true,
      valFrom: "yyyy-MM-dd",
      dateType: "date", // 时间类型
      seltdisab: false,
      staVal: "yali",
    };
  },
  watch: {
    dateVal: {
      handler (newVal) {
        if (newVal == null) {
          this.seltdisab = true;
        } else {
          this.seltdisab = false;
        }
      },
      deep: true,
    },
  },
  created () {
    // this.newdata();
  },
  mounted () {
    this.suoS.monitorPointId = this.$parent.$parent.$parent.nodeData
    if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData) {
      this.getConsumeList()
      debugger;
    }
    // this.suoS.monitorPointId = this.$parent.$parent.$parent.nodeData.id; // 检测点Id
    // // console.log(this.suoS.monitorPointId + "父级组件");
    // if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData.id) {
    //   this.$refs.gongyong.serchClick(); // 调用一次公共组件搜索按钮
    // } else {
    //   setTimeout(() => {
    //     this.$refs.gongyong.serchClick();
    //   }, 1000);
    // }
  },
  methods: {
    // 日期选择
    dateChange (value) {
      // console.log(this.suoS.searchTime);
      this.suoS.searchTime = value;
      this.getConsumeList()
    },

    newdata () {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        undefined;
        month = "0" + month;
      }
      if (day < 10) {
        undefined;
        day == "0" + day;
      }
      this.dateVal = year += "-" + month + "-" + day;
      // console.log(this.suoS.searchTime);
    },

    // 获取消耗列表数据
    async getConsumeList () {
      let obj = this.suoS
      let timeType = this.suoS.timeType
      // console.log(timeType)
      // debugger;
      if (!this.suoS.monitorPointId) {
        console.log("请选择监测点");
        this.$message.error("请选择监测点");
        this.loading = false;
        return;
      }
      try {
        // console.log(this.suoS)
        // debugger;
        let res
        if (this.interType == 'noQs') {
          delete obj.timeType
          if (timeType == 0) {
            res = await getPressureDayReport(obj)
          } else if (timeType == 1) {
            res = await getPressureMonthReport(obj)
          } else {
            res = await getPressureYearReport(obj)
            this.suoS['timeType'] = timeType
          }
        } else {
          if (timeType == 0) {
            debugger
            res = await getConsumeDay(obj)
          } else if (timeType == 1) {
            debugger
            res = await getConsumeMonth(obj)
          } else {
            debugger
            res = await getConsumeYear(obj)
          }
        }
        console.log(res);
        if (!res.code === 20000) {
          this.loading = false;
          return this.$message.error("查询失败");
        }
        this.suoS['timeType'] = timeType
        this.$message.success("查询成功");
        this.consume = res.data;
        this.loading = false;
      } catch (err) {
        this.suoS['timeType'] = timeType
        this.loading = false;
      }
    },
    // 时间选择下拉
    selectChange (label) {
      if (!this.dateVal) {
        return this.$message.error("请输入查询时间");
      }
      console.log(label);
      this.suoS.timeType = label;
      // let str = this.dateVal;
      if (label === 0) {
        this.dateType = "date";
        this.valFrom = "yyyy-MM-dd";
        this.newdata();
        this.suoS.searchTime = this.dateVal;
      } else if (label === 1) {
        this.newdata();

        this.dateType = "month";
        this.valFrom = "yyyy-MM";
        this.suoS.searchTime = this.dateVal.substring(0, 7);
        this.disposeDateHader(this.tableColumn);
      } else if (label === 2) {
        this.newdata();

        this.dateType = "year";
        this.valFrom = "yyyy";

        this.suoS.searchTime = this.dateVal.substring(0, 4);
        this.disposeDateHader(this.tableColumn);
      }
      this.getConsumeList()
    },

    // 处理年月表头
    disposeDateHader (haderList) {
      console.log(haderList);
      let newhaderList = [...haderList];

      haderList.forEach((item) => {
        console.log(item);
        if (item.hm) {
          newhaderList = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 0,
            },
            {
              name: "平均值" + item.hm,
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "最大值" + item.hm,
              prop: "das",
              type: "",
              id: 2,
            },
            {
              name: "最小值" + item.hm,
              prop: "das",
              type: "",
              id: 3,
            },
          ];
        } else {
        }

        if (item.children) {
          // console.log(item.children);
          if (item.hm) {
            item.children = [
              {
                name: "平均值" + item.hm,
                prop: "displayTime",
                type: "",
                id: 1,
              },
              {
                name: "最大值" + item.hm,
                prop: "das",
                type: "",
                id: 2,
              },
              {
                name: "最小值" + item.hm,
                prop: "das",
                type: "",
                id: 3,
              },
            ];
          }
        }
      });
      this.tableColumn = newhaderList;
    },

    // 报表下拉
    staChange (data) {
      console.log(data);
      this.tableColumn = data.staTble
      this.staVal = data.staVal
      this.suoS.properties = data.properties
      this.interType = data.interType
      this.getConsumeList()
    },
    // 点击搜索按钮
    async serchClick () {
      console.log("搜索按钮触发事件");
      if (!this.suoS.searchTime) {
        console.log("请选择查询时间");
        this.$message.error("请选择查询时间");
        return;
      }
      console.log(this.staVal);
      this.getConsumeList();
    },

    // // 点击重置按钮
    // resetClick() {},
  },
};
</script>

<style lang="scss" scoped></style>
